import NavBar from '../../components/NavBar'
import Menu from '../../components/Menu'
import Cart from '../../components/Cart'
import FoodsCategory from '../../components/FoodsCategory'
import { useDispatch, useSelector } from 'react-redux'
import { fetchFoodsList } from '../../store/modules/foodStore'
import { useEffect } from 'react'
import './index.scss'


const ShoppingCart = () => {
    // 触发action执行
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(fetchFoodsList())
    }, [dispatch])

    const {foodsList, activeIndex} = useSelector(state => state.foods)
    // 商品列表
    const foodsData = foodsList.map((item, index) => {
        return (
            activeIndex === index &&
            <FoodsCategory
                key={item.tag}
                // 列表标题
                name={item.name}
                // 列表商品
                foods={item.foods}
            />
        )
    })

    return (
        <div className="home">
            {/* 导航 */}
            <NavBar />
            {/* 内容 */}
            <div className="content-wrap">
                <div className="content">
                    <Menu />
                    <div className="list-content">
                        <div className="goods-list">
                            {/* 外卖商品列表 */}
                            {foodsData}
                        </div>
                    </div>
                </div>
            </div>

            {/* 购物车 */}
            <Cart />
        </div>
    )
}

export default ShoppingCart

// const ShoppingCart = () => {
//     return(
//         <div>ppp</div>
//     )
// }
//
// export default ShoppingCart
